<template>
	<div class="up-comment-item py-1 text-t-1 text-sm border-b border-border-1">
		<div class="flex">
			<account-avatar :data="data.avatar" :userId="data.userId" :width="28" />
			<div class="ml-1 flex-1 truncate">
				<div class="text-base app-font-bold">
					{{ data.userNick || data.userName }}
				</div>
				<div class="text-t-3 -mt-1">@{{ data.userName }}</div>
			</div>
			<div class="mt-[2px] text-t-3">{{ fmtDateTime(data.createdAt) }}</div>
		</div>
		<div class="pl-8 break-words whitespace-pre-wrap">
			{{ data.content }}
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { CommentType } from '@/types'
import { AccountAvatar } from '@/components/account'
import { fmtDateTime } from '@/utils'
defineProps({
	data: {
		type: Object as PropType<CommentType>,
		required: true
	}
})
</script>
